<template>
  <div class="tab flex-warp  justify-center items-center">
    <div
      v-for="(tabitem, index) in wallets"
      :key="index"
      class="tabbox"
      @click="tabblecli(tabitem, index)"
    >
      <img
        :src="currentTab === index ? tabitem.acticon : tabitem.icon"
        class="tabitem-icon"
        :class="{ large: index == 2 }"
      />

      <div :class="currentTab === index ? 'acticonsty' : ''">
        {{ tabitem.name }}
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      wallets: [
        {
          icon: require("../assets/image/tab/tab1.png"),
          acticon: require("../assets/image/tab/actab1.png"),
          name: this.$t("tab.tab1"),
          linkUrl: "/",
        },
        {
          icon: require("../assets/image/tab/tab2.png"),
          acticon: require("../assets/image/tab/actab2.png"),
          name: this.$t("tab.tab2"),
          linkUrl: "/mining",
        },
        {
          icon: require("../assets/image/tab/tab3.png"),
          acticon: require("../assets/image/tab/actab3.png"),
          linkUrl: "/swap",
        },
        {
          icon: require("../assets/image/tab/tab4.png"),
          acticon: require("../assets/image/tab/actab4.png"),
          name: this.$t("tab.tab4"),

          linkUrl: "/community",
        },
        {
          name: "Русский",
          icon: require("../assets/image/tab/tab5.png"),
          acticon: require("../assets/image/tab/actab5.png"),
          name: this.$t("tab.tab5"),

          linkUrl: "/mine",
        },
      ],
      currentTab: 0,
    };
  },
  watch: {
    // 监听路由变化
    $route(newRoute) {
      const matchedTab = this.wallets.find(
        (item, index) => item.linkUrl === newRoute.path
      );
      if (matchedTab) {
        this.currentTab = this.wallets.indexOf(matchedTab);
      }
    },
  },
  methods: {
    tabblecli(item, index) {
      this.currentTab = index;
      this.$router.push(item.linkUrl); // 启用路由跳转
    },
    tabblecli(item, i) {
      this.currentTab = i;
      this.$router.push(item.linkUrl);
    },
  },
  mounted() {
    // 初始化 currentTab
    const matchedTab = this.wallets.find(
      (item) => item.linkUrl === this.$route.path
    );
    if (matchedTab) {
      this.currentTab = this.wallets.indexOf(matchedTab);
    }
  },
};
</script>
<style lang="less" scoped>
.tab {
  width: 100%;
  height: 148px;
  position: fixed;
  bottom: 0;
  z-index: 9;
  background: #282443;
  padding: 10px 0 64px;
  .tabbox {
    text-align: center;
    flex: 1;
    font-weight: normal;

    img {
      width: 56px;
      height: 56px;
    }
    .large {
      width: 108px;
      height: 108px;
    }
    > div {
      font-size: 24px !important;
      
    }
    .acticonsty {
      color: #d0409d !important;
    }
  }
}
</style>
